<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
    <!-- 可选的Bootstrap主题文件（一般不用引入） -->
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-theme.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="/static/bootstrap/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/static/bootstrap/bootstrap.min.js"></script>
    ##     <!-- jsTree -->
    ##     <link rel="stylesheet" href="/static/jstree/themes/default/style.min.css" />
    ##     <script src="/static/jstree/jquery.min.js"></script>
    ##     <script src="/static/jstree/jstree.min.js"></script>
    ##     <!-- echarts -->
    ##     <script src="/static/echarts/echarts-all.js"></script>


    ## JS 引用顺序: jquery, underscore, backbone
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <script src="http://apps.bdimg.com/libs/underscore.js/1.7.0/underscore.js"></script>
    <script src="http://apps.bdimg.com/libs/backbone.js/1.1.2/backbone.js"></script>
</head>
<body>
    <h3>backbone.js</h3>

    ##     <div class="container-fluid">
    ##         ${ data['key'] }
    ##     </div>

    <div class="container-fluid">
        <table class="table table-bordered table-striped" id="id_table">
            <thead>
                <tr>
                    <td>ID</td>
                    <th>图片</th>
                    <th>标题</th>
                    <th>来源频道</th>
                    <th>详情</th>
                    <th>发布时间</th>
                </tr>
            </thead>
            <tbody>
##                 {% for news in page.object_list %}
##                 <tr>
##                     <td>{{ news.id }}</td>
##                     <td>
##                         <img src="{{ news.img }}" height="120" width="160">
##                     </td>
##                     <td><a href="{{ news.link }}">{{ news.title }}</a></td>
##                     <td>{{ news.source }}<br>{{ news.channel_name }}({{ news.channel_id }})</td>
##                     <td>{{ news.desc }}</td>
##                     <td>{{ news.datetime_publish }}</td>
##                 </tr>
##                 {% endfor %}
            </tbody>
        </table>
    </div>




    <script>
        (function($){
            var News = Backbone.Model.extend({
                // url: "http://192.168.100.100:8000/api/news/?format=json",
                url: "/api/news/?format=json",
                initialize: function(){
                    // 根据接口返回数据初始化页面
                    this.fetch({
                        success: function(model, response){
                            console.log('fetch success');
                            //response为获取到的数据
                            console.log(model);
                            console.log(response);
                            var news_list = model.get('results');
                            console.log(news_list);

                            // 根据接口返回数据初始化页面
                            var table = document.getElementById("id_table");
                            var thead = table.children[0];
                            console.log(thead);
                            var tbody = table.children[1];
                            console.log(tbody);


                            for(var i=0;i<news_list.length;i++){
                                console.log(news_list[i]);
                                var tr = document.getElementById('id_' + news_list[i]['id']);
                                if (!tr) {
                                    tr = document.createElement('tr');
                                    tr.setAttribute('id', 'id_' + news_list[i]['id']);
                                    tr.innerHTML = '<td>' + news_list[i]['id'] + '</td>';
                                    tr.innerHTML += '<td><img src="' + news_list[i]['img'] + '" height="120" width="160"></td>';
                                    tr.innerHTML += '<td>' + news_list[i]['title'] + '</td>';
                                    tbody.appendChild(tr);
                                }
                            }


                        },
                        error: function(){
                            alert('fetch error');
                        }
                    });
                }
            });

            var news = new News();

        })(jQuery);
    </script>


</body>
</html>
